import React, { Component } from 'react'
import CommentHeader from './CommentHeader'
import CommentInput from './CommentInput'
import CommentList from './CommentList'
import '../index.css'

export default class Comment extends Component {
  state = {
    // 当前用户
    user: {
      name: '清风徐来',
      vip: true,
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
    },
    // 评论列表
    comments: [
      {
        id: 100,
        name: '__RichMan',
        avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
        content:
          '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
        time: new Date('2021/10/12 10:10:23'),
        vip: true,
        collect: false,
      },
      {
        id: 101,
        name: '糖蜜甜筒颖',
        avatar:
          'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
        content:
          '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
        time: new Date('2021/09/23 15:12:44'),
        vip: false,
        collect: true,
      },
      {
        id: 102,
        name: '清风徐来',
        avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
        content:
          '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
        time: new Date('2021/07/01 00:30:51'),
        vip: true,
        collect: false,
      },
    ],
    // 排序选中项
    orderActive: 'default', // 默认激活
  }

  // 修改排序高亮
  setOrderActive = (val) => {
    this.setState({
      orderActive: val,
    })
  }

  // 追加评论
  onAddComment = (content) => {
    // console.log('追加评论')
    const comments = {
      ...this.state.user,
      id: Math.random(),
      content,
      time: new Date(),
      collect: false,
    }
    this.setState({ comments: [...this.state.comments, comments] })
  }

  // 删除
  onRemoveComments = (id) => {
    console.log('删除', id)
    this.setState({
      comments: this.state.comments.filter((item) => item.id !== id),
    })
  }

  // 修改收藏
  onSetCollect = (id) => {
    this.setState({
      comments: this.state.comments.map((item) => {
        if (item.id === id) {
          return { ...item, collect: !item.collect }
        }
        return item
      }),
    })
  }

  render() {
    const { comments, orderActive } = this.state
    const newComments = [...comments]
    if (orderActive === 'default') {
      newComments.sort((a, b) => {
        return a.id - b.id
      })
    } else {
      // console.log('根据时间排序')
      newComments.sort((a, b) => {
        return a.time - b.time
      })
    }
    return (
      <div className="comments">
        <CommentHeader onAddComment={this.onAddComment} />
        <CommentInput
          orderActive={orderActive}
          setOrderActive={this.setOrderActive}
        />
        <CommentList
          comments={newComments}
          onRemoveComments={this.onRemoveComments}
          onSetCollect={this.onSetCollect}
        />
      </div>
    )
  }
}
